<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./library/bs/css/bootstrap.min.css">
    <script src="./library/bs/js/bootstrap.min.js"></script>
    <script src="./library/bs/js/bootstrap.bundle.min.js"></script>
    <script src="./library/axios-1.7.2/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./css/course.css">
    <title>课程</title>

</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary container">
    <div class="container-fluid">
        <a class="nav-item" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">课程页面</li>
            </ol>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <!--                <li class="navbar-brand">-->
                <!--                    <img src="https://codelover.club/icons/course/icon4.svg" alt="Logo" width="30" height="30"-->
                <!--                         class="d-inline-block align-text-top" style="border-radius: 50%">-->
                <!--                    程序设计基础<span class="fs-6">(已选137人)</span>-->
                <!--                </li>-->
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link active" aria-current="page" href="#">-->
                <!--                        李 俊 <span class="badge text-bg-warning">教师</span>-->
                <!--                    </a>-->
                <!--                </li>-->

            </ul>
        </div>
    </div>
</nav>
<section class="container mt-5 w-100 ">
    <div class="row ">
        <div class="col-4 sticky-top " style="height: 70vh">
            <nav id="navbar-example " class="h-100 overflow-auto flex-column align-items-stretch pe-4">
                <div class="list-group nav nav-pills" id="list-tab" role="tablist">
                    <a class="nav-link  rmy-1 disabled  " id="list-home2-list"
                       data-bs-toggle="list"
                       href="#list-profile" role="tab" aria-controls="list-profile"><img
                            src="https://codelover.club/icons/task/icon7.svg" alt="Logo" width="25" height="25"
                            class="d-inline-block align-text-top">Home</a>
                    <a class="nav-link ms-3   my-1  list-group-item-action active" id="list-profile-list"
                       data-bs-toggle="list"
                       href="#list-profile" role="tab" aria-controls="list-profile">
                        <img src="https://codelover.club/icons/taskgroup/icon11.svg" alt="Logo" width="25" height="25"
                             class="d-inline-block align-text-top">课程任务</a>
                    <a class="nav-link ms-3  my-1  list-group-item-action " id="list-messages-list"
                       data-bs-toggle="list"
                       href="#list-messages" role="tab" aria-controls="list-messages">数据加载中</a>
                </div>
            </nav>
            <div class="d-grid gap-2 col-12 mx-auto">
                <button class="btn btn-primary " type="button" data-name="top">Top</button>
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content h-100" id="nav-tabContent">
                <div class="tab-pane fade list-group" id="list-profile" role="tabpanel"
                     aria-labelledby="list-profile-list">
                    <li class="list-group-item">logo"operType": "查阅"</li>
                    <li class="list-group-item">目标："goal": "课程任务"</li>
                    <li class="list-group-item">简介"description": "课程任务"</li>
                    <li class="list-group-item">内容"guidelines": "description": "任务引导文"</li>
                </div>
                <div class="tab-pane fade list-group" id="list-messages" role="tabpanel"
                     aria-labelledby="list-messages-list">
                    <li class="list-group-item align-items-center">
                        <div class="d-flex w-100 justify-content-between">
                            <p class="mb-1">Some placeholder content in a paragraph.</p>
                            <small class="text-muted">3 days ago</small>
                        </div>
                        <h5 class="mb-1">List group item heading</h5>
                        <small class="text-muted">And some muted small print.</small>
                    </li>
                </div>
            </div>
        </div>
    </div>
</section>


</body>
<script src="./js/script.js"></script>
<script src="./js/course.js"></script>
</html>